import React, { ChangeEvent, useState } from "react";
import { Button, Input, InputRef } from "antd";
import Calender from "./components/calender";
import Calender1 from "./components/calender1";
import Calender2 from "./components/calender2";
import Calender3 from "../calendar/index";
const Controller = () => {
  return (
    <>
      <h1 className="text-3xl">Controller</h1>
      <Con1 />
      <hr />
      <Con2 />
      <hr />
      <Con3 />
      <hr />
      <Con4 />
      <hr />
      <Con5 />
      <hr />
      <br />
      <Calender3
        defaultValue={new Date()}
        onChange={(value) => alert(value.toLocaleDateString())}
      ></Calender3>
    </>
  );
};

const Con1 = () => {
  // console.log("render Con1...");
  const [value, setValue] = useState<string>("");
  return (
    <div>
      <h2 className="text-red-500">受控组件</h2>
      <label htmlFor="test1">输入：</label>
      <Input
        id="test1"
        className="border-2 w-[200px]"
        type="text"
        value={value}
        onChange={(event: ChangeEvent<HTMLInputElement>) =>
          setValue(event.target.value)
        }
      />
      <p>value：{value}</p>
      <br />
      <ul>
        <li>
          1. 修改输入框的值，<span className="text-red-500">会</span>
          触发多次渲染组件
        </li>
      </ul>
    </div>
  );
};
const Con2 = () => {
  // console.log("render Con2...");
  const ref = React.useRef<InputRef>(null);
  const [value, setValue] = useState<string | null>("123");
  return (
    <div>
      <h2 className="text-red-500">非受控组件</h2>
      <label htmlFor="test1">输入：</label>
      <Input id="test1" className="border-2 w-[200px]" type="text" ref={ref} />
      <Button
        type="primary"
        className="ml-2"
        onClick={() => {
          if (ref.current && ref.current.input) {
            setValue(ref.current.input.value);
          }
        }}
      >
        获取value
      </Button>
      <p>value：{value}</p>
      <br />
      <ul>
        <li>
          1. 修改输入框的值，<span className="text-red-500">不会</span>
          触发多次渲染组件
        </li>
      </ul>
    </div>
  );
};

const Con3 = () => {
  // console.log("render Con3...");
  return (
    <div>
      <h2 className="text-red-500">示例 Calender 非受控</h2>
      <Calender
        defaultValue={new Date()}
        onChange={(value) => console.log(value.toLocaleDateString())}
      ></Calender>
    </div>
  );
};

const Con4 = () => {
  // console.log("render Con4...");
  const [value, setValue] = useState(new Date());
  return (
    <div>
      <h2 className="text-red-500">示例 Calender 受控</h2>
      <Calender1
        value={value}
        onChange={(value) => {
          console.log(value.toLocaleDateString());
          setValue(value);
        }}
      ></Calender1>
    </div>
  );
};
const Con5 = () => {
  console.log("render Con5...");
  // const [value, setValue] = useState(new Date())
  return (
    <div>
      <h2 className="text-red-500">示例 Calender 受控和非受控都支持</h2>
      <Calender2
        // value={value}
        defaultValue={new Date()}
        onChange={(value) => {
          console.log(value.toLocaleDateString());
          // setValue(value)
        }}
      ></Calender2>
    </div>
  );
};

export default Controller;
